<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随访记录列表</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-50 min-vh-100 d-flex flex-column">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="/">
                <img src="/static/images/logo.png" alt="Logo" class="rounded-circle me-2" width="40" height="40">
                <span class="font-bold text-primary">眼底随访系统</span>
            </a>
            <div class="navbar-nav ms-auto">
                <span class="nav-item nav-link">欢迎，{{ user }}！</span>
                <a class="nav-item nav-link text-danger" href="/logout">退出</a>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="flex-grow-1 container my-5">
        <div class="card w-100 max-w-4xl mx-auto p-6 shadow-lg rounded-xl fade-up" style="animation-delay: 0.1s">
            <div class="d-flex justify-content-between align-items-center mb-6 fade-up" style="animation-delay: 0.2s">
                <h2 class="text-xl font-bold text-primary">随访记录列表</h2>
                <a href="/add_record" class="btn btn-primary rounded-full px-6 py-2 hover:shadow-lg transition-all duration-300">添加随访记录</a>
            </div>

            <div class="overflow-x-auto fade-up" style="animation-delay: 0.3s">
                <table class="table table-striped rounded-lg overflow-hidden shadow-sm bg-white">
                    <thead class="bg-primary text-white">
                    <tr>
                        <th>记录编号</th>
                        <th>病人名字</th>
                        <th>医生</th>
                        <th>日期</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for record in records %}
                        <tr class="hover:bg-blue-50 transition-colors duration-200">
                            <td>{{ record.id }}</td>
                            <td>{{ record.username }}</td>
                            <td>{{ record.doctor_name }}</td>
                            <td>{{ record.date }}</td>
                            <td>
                                <a href="/record/{{ record.id }}" class="btn btn-sm btn-outline-primary rounded-full px-4 py-1 hover:shadow-md transition-all duration-300">查看详情</a>
                                <form action="/delete_record/{{ record.id }}" method="post" class="d-inline">
                                    <button type="submit" class="btn btn-sm btn-outline-danger rounded-full px-4 py-1 hover:shadow-md transition-all duration-300 ml-2" onclick="return confirm('确定要删除这条记录吗？')">删除</button>
                                </form>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white py-4 shadow-inner">
        <div class="container text-center text-gray-600">
            <p>© 2025 眼底随访系统. 保留所有权利.</p>
        </div>
    </footer>
</body>
</html>